<template>
  <view class="flex justify-between py-3">

    <view class="flex flex-grow">
      <view :class="avatarClass" class="relative flex-shrink-0 rounded-none">
        <image :src="avatar" :class="avatarClass" mode="aspectFill" />
        <view class="absolute -bottom-[10rpx] w-full text-center">  
          <slot name="status"></slot>
        </view>
      </view>

      <view class="flex flex-col justify-center flex-grow px-2"> 
        <view>
          <text class="text-base font-bold">{{ userName }}</text>
          <text v-if="deptName" class="pl-1.5 u-content-color">{{ deptName }}</text>
          <text v-if="postName" class="pl-1.5 u-content-color">{{ postName }}</text>
        </view>
        <view v-if="com" class="u-content-color pt-[4rpx]">{{ com }}</view>
        <slot name="content"></slot>
      </view>
    </view>
    
    <view class="flex-shrink-0">
      <view v-if="mobile" class="flex items-center h-full">
        <image
        src="@/static/image/icon/icon_dial.png"
        class="block w-8 h-8"
        @click.stop="callPhone(mobile)" />
      </view>
      
      <slot v-else name="suffix"></slot>
    </view>
  </view>
</template>
 
<script setup lang="ts">
import { callPhone } from "@/utils";

const props = defineProps({
  avatar: {
    type: String,
    default: ''
  },
  avatarClass: {
    type: String,
    default: 'w-[120rpx] h-[120rpx] rounded-full'
  },
  userName: {
    type: String,
    default: ''
  },
  deptName: {
    type: String,
    default: ''
  },
  postName: {
    type: String,
    default: ''
  },
  com: {
    type: String,
    default: ''
  },
  mobile: {
    type: String,
    default: ''
  }
})
</script>

<style lang="scss" scoped></style>
